import React from 'react'
import { ResultPage, Card, Tabs, Button } from 'antd-mobile'
import { LoopOutline } from 'antd-mobile-icons'
import { useDispatch, useSelector } from 'react-redux'
import { huan } from '../../store/city'
import { useNavigate } from 'react-router-dom'

// 导入React组件
function Index() {
    // 使用useNavigate钩子函数，用于导航
    const nav=useNavigate()
    // 使用useSelector钩子函数，从Redux中获取城市信息
    const {start,end}=useSelector(state=>state.city)
    console.log(start,end);
    // 使用useDispatch钩子函数，用于分发Redux action
    const dispatch=useDispatch() 
    // 定义一个函数，用于切换城市
    const dj=()=>{
        dispatch(huan())
    }
    return (
        <div>
            <ResultPage
                status=''
                title='12306'
                description='车站买票系统，出行必备软件'
            >
                <ResultPage.Card style={{ padding: 8 }}>
                    <Tabs>
                        <Tabs.Tab title='单程' key='fruits'>
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <span onClick={()=>nav('/city/start')}>{start}</span>
                                <span><LoopOutline fontSize={24} onClick={()=>dj()} /></span>
                                <span onClick={()=>nav('/city/end')}>{end}</span>
                            </div>
                            <Button block color='primary' fill='solid'>查询</Button>
                        </Tabs.Tab>
                        <Tabs.Tab title='往返' key='vegetables'>
                            往返
                        </Tabs.Tab>
                        <Tabs.Tab title='特价机票' key='animals'>
                            特价机票
                        </Tabs.Tab>
                    </Tabs>
                </ResultPage.Card>
            </ResultPage>
        </div>
    )
}

export default Index